<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if post %}编辑文章{% else %}新建文章{% endif %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-2xl mx-auto">
            <div class="flex justify-between items-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800">
                    {% if post %}编辑文章{% else %}新建文章{% endif %}
                </h1>
                <a href="{{ url_for('admin') }}" class="text-gray-600 hover:text-gray-900">
                    返回列表
                </a>
            </div>

            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="mb-4 p-4 rounded {% if category == 'error' %}bg-red-100 text-red-700{% else %}bg-green-100 text-green-700{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <form method="POST" class="bg-white shadow rounded-lg p-6">
                <div class="mb-6">
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-2">标题</label>
                    <input type="text" 
                           name="title" 
                           id="title" 
                           value="{{ post.title if post else '' }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500"
                           required>
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="url">
                        URL链接
                    </label>
                    <input type="url" id="url" name="url" value="{{ post.url if post else '' }}"
                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="hook">
                        钩子
                    </label>
                    <input type="text" id="hook" name="hook" value="{{ post.hook if post else '' }}"
                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           placeholder="输入文章钩子，例如：'震惊！这家店居然...'">
                </div>

                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" id="is_hot" name="is_hot" 
                               {% if post and post.is_hot %}checked{% endif %}
                               class="mr-2">
                        <span class="text-gray-700 text-sm font-bold">爆款笔记</span>
                    </label>
                </div>

                <div class="mb-4">
                    <label for="keywords" class="block text-gray-700 text-sm font-bold mb-2">关键词（用逗号分隔）</label>
                    <input type="text" id="keywords" name="keywords" value="{{ post.keywords if post else '' }}"
                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                </div>

                <div class="mb-4">
                    <label for="interaction" class="block text-gray-700 text-sm font-bold mb-2">互动数据</label>
                    <input type="text" id="interaction" name="interaction" value="{{ post.interaction if post else '' }}"
                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           placeholder="例如：123点赞 45评论 67收藏">
                </div>

                <div class="mb-4">
                    <label for="date" class="block text-gray-700 text-sm font-bold mb-2">发布日期</label>
                    <input type="text" id="date" name="date" value="{{ post.date if post else '' }}"
                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           placeholder="例如：11-08">
                </div>

                <div class="mb-4">
                    <label for="cover" class="block text-gray-700 text-sm font-bold mb-2">封面图片URL</label>
                    <input type="text" id="cover" name="cover" value="{{ post.cover if post else '' }}"
                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                </div>

                <div class="mb-6">
                    <label for="content" class="block text-sm font-medium text-gray-700 mb-2">内容</label>
                    <textarea name="content" 
                              id="content" 
                              rows="10"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500"
                              required>{{ post.content if post else '' }}</textarea>
                </div>

                <div class="flex justify-end">
                    <button type="submit" 
                            class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                        {% if post %}更新文章{% else %}创建文章{% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
    async function updateLocations(district) {
        if (!district) {
            document.getElementById('location').innerHTML = '<option value="">请先选择地区</option>';
            return;
        }

        try {
            const response = await fetch(`/api/locations/${district}`);
            const locations = await response.json();
            
            let options = '<option value="">选择位置</option>';
            locations.forEach(location => {
                options += `<option value="${location}">${location}</option>`;
            });
            
            document.getElementById('location').innerHTML = options;
        } catch (error) {
            console.error('获取位置列表失败:', error);
        }
    }

    // 如果是编辑模式，初始化位置列表
    {% if post and post.district %}
    updateLocations('{{ post.district }}');
    {% endif %}
    </script>
</body>
</html>
